<template>
    <div class="learn" style="height:100%">
        <div class="header-box header-white">
            <span class="icon">
                <!-- v-if="catalogList.length>0" -->
                <i class="iconfont icon-liebiao" @click="open"></i>
            </span>
            <van-tabs v-model="active" @click="jump" style="min-width:55%" color=" #075ebb" title-active-color=" #075ebb" title-inactive-color="#999">
                <van-tab :title="$t('menu_course')"></van-tab><!--课程-->
                <van-tab :title="$t('certified_courses')"></van-tab><!--认证课程-->
                <van-tab :title="$t('personal_ls_knowledge')"></van-tab><!--知识-->
                <van-tab :title="$t('personal_my_data_exam')"></van-tab><!--考试-->
            </van-tabs>
            <router-link tag="li" to="/search" class="icon iconfont icon-sousuo"></router-link>
        </div>
        <div class="content" style="padding: 54px 0 56px;">
            <!-- <keep-alive> -->
                <router-view
                :type="cala"
                :mlId="catId"></router-view>
            <!-- </keep-alive> -->
        </div>
        <bottom-navigation :active=1></bottom-navigation>
        <!-- 目录弹出层 -->
        <!-- <div class="modal" v-if="showCatalog" @click="showCatalog = false">
            <div @click.stop="showCatalog = true" style="height:70%">
                <catalog :catalogList="catalogList" @goDetail="goCatalogDetail" :lookAll='lookAll'></catalog>
            </div>
        </div> -->
        <div>
            <van-popup
                v-model="show"
                round
                position="bottom"
            >
                <van-cascader
                v-model="cascaderValue"
                :title="$t('error_catalog')"
                :placeholder="$t('please_select')"
                active-color=" #075ebb"
                :options="catalogList"
                @close="show = false"
                @change="mlChange"
                :field-names="{text: 'name', value: 'id', children: 'children'}"
                />
            </van-popup>
        </div>
    </div>
</template>

<script>
import { Tab, Tabs, Icon, Cascader, Popup } from 'vant';
import catalog from './catalog';
export default {
    name: 'newLearn',
    data() {
        return {
            active: 0,
            show: false,
            path: '',
            encId: '',
            lookAll: '',
            cascaderValue: '',
            catalogList: [], // 目录树
            cala: null,
            catId: 0,
            // isShow: true,
            isEmpty: false,
            isUpdateActive: false,
            showCatalog: false // 目录蒙版
        };
    },
    components: {
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [Icon.name]: Icon,
        catalog,
        vanCascader: Cascader,
        vanPopup: Popup
    },
    methods: {
        mlChange(val) {
            //
            this.catId = val.value;
            let obj = {
                name: this.$t('circle258'),
                id: val.value
            };
            let lastI = val.selectedOptions.length - 1;
            let lastChild = val.selectedOptions[lastI];
            //
            let juDge = lastChild.children && lastChild.children.length > 0;
            let juDge1 = lastChild.id && lastChild.children && lastChild.children.length === 0;
            if (juDge && lastChild.children[0].name === this.$t('circle258')) {
                return;
            }
            if (juDge) {
                lastChild.children.unshift(obj);
            }
            if (juDge1) {
                lastChild.children = null;
            }
        },
        open() {
            this.show = true;
            this.cascaderValue = '';
            switch (this.active) {
            case 0:
                this.courseCatalog(0);
                break;
            case 1:
                this.courseCatalog(2);
                break;
            case 2:
                this.knowledgeCatalog();
                break;
            case 3:
                this.courseCatalog(1);
                break;
            }
        },
        jump(index) {
            // this.isShow = false;
            // this.catalogList = [];
            // this.$nextTick(() => {
            //     this.isShow = true;
            // });
            this.active = index;
            this.showCatalog = false;
            this.show = false;
            switch (index) {
            case 0:
                const encId = window.localStorage.getItem('loginUser');
                // this.courseCatalog();
                this.lookAll = this.$t('look_all_course');
                this.$router.push({path: `/learn/myCourses/${encId}`});
                // this.courseCatalog();
                break;
            case 1:
                const encId1 = window.localStorage.getItem('loginUser');
                this.$router.push({path: `/learn/certifiedCourses/${encId1}`});
                this.lookAll = this.$t('look_all_course');
                // this.knowledgeCatalog();
                break;
            case 2:
                this.$router.push({path: '/learn/knowledge'});
                this.lookAll = this.$t('look_all_knowledge');
                // this.knowledgeCatalog();
                break;
            case 3:
                this.$router.push({path: '/learn/examination'});
                this.lookAll = this.$t('look_all_exam');
                // this.courseCatalog();
                break;
            }
        },
        init() {
            if (window.localStorage.getItem('loginUser')) {
                this.encId = window.localStorage.getItem('loginUser');
            } else {
                this.$axios({
                    method: 'GET',
                    url: '/app/api/user/current'
                }).then(res => {
                    this.encId = this.wbEncryptor(res.data.usrEntId);
                });
            }
        },
        /**
         * 课程目录
         * */
        courseCatalog(catTypeInds) {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/tree/list/tree`,
                params: {
                    trainId: '',
                    catTypeInd: catTypeInds || 0
                }
            }).then((res) => {
                // 目录
                this.catalogList = res.data;
                let obj = {
                    name: this.$t('circle258'),
                    id: 0
                };
                this.catalogList.unshift(obj);
            });
        },
        /**
         * 知识目录
         * */
        knowledgeCatalog() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/kb/item/catalog/all`,
                params: {
                    kbcTcrId: 0
                }
            }).then((res) => {
                // 目录
                let lists = res.data;
                let obj = {
                    name: this.$t('circle258'),
                    id: 0
                };
                this.catalogList = this._buildTree(lists, 0);
                this.catalogList.unshift(obj);
            });
        },
        // test (arr) {

        // },
        /**
         * 生成目录树结构
         * */
        _buildTree(data, pid) {
            let returnArr = [];
            data.forEach((item) => {
                item.id = item.kbcId;
                item.name = item.kbcTitle;
                if (item.kbcParentId === pid) {
                    //除去最高层级的数据（id === 0）
                    returnArr.push(item);
                    //进入递归中处理
                    this.getchilds(data, item, item.kbcId);
                }
            });
            return returnArr;
        },
        getchilds(arr, itemData, itemId) {
            //首先判断是否有子类  没有默认为空
            itemData.children = itemData.children ? itemData.children : [];
            arr.forEach((item) => {
                //递归条件
                if (item.kbcParentId === itemId) {
                    //找到则追加至上层数据children中
                    itemData.children.push(item);
                    //不断递归查找子类直到找不到子类本次递归结束才进入_buildTree函数进行下一最高层级操作
                    this.getchilds(arr, item, item.kbcId);
                }
            });
        },
        /**
         * 进入目录二级页面
         * */
        goCatalogDetail(item, fid) {
            window.sessionStorage.setItem('catalog', JSON.stringify(this.catalogList));
            if (this.active === 1) {
                this.$router.push({path: '/konwledge-list', query: { id: item.id, title: item.name, fid }});
            } else {
                this.$router.push({path: '/course-list', query: { id: item.id, title: item.name, fid, type: this.active }});
            }
        }
    },
    mounted() {
        const encId1 = window.localStorage.getItem('loginUser');
        if (this.$route.path === '/learn/knowledge') {
            this.active = 2;
            this.lookAll = this.$t('look_all_knowledge');
        } else if (this.$route.path === '/learn/examination') {
            this.active = 3;
            this.lookAll = this.$t('look_all_exam');
        } else if (this.$route.path === `/learn/certifiedCourses/${encId1}`) {
            this.active = 1;
            this.lookAll = this.$t('look_all_course');
        } else {
            this.active = 0;
            this.lookAll = this.$t('look_all_course');
        }
        // this.isShow = false;
        //
        // // 获取目录
        // if (this.active === 1) {
        //     this.knowledgeCatalog();
        // } else {
        //     this.courseCatalog();
        // }
        // this.init();
    },
    watch: {
        $route: {
            handler: function(val, oldVal) {
                const encId1 = window.localStorage.getItem('loginUser');
                this.showCatalog = false;
                this.activeCatalog = 0;
                if (this.$route.path === '/learn/knowledge') {
                    this.active = 2;
                    this.lookAll = this.$t('look_all_knowledge');
                } else if (this.$route.path === '/learn/examination') {
                    this.active = 3;
                    this.lookAll = this.$t('look_all_exam');
                } else if (this.$route.path === `/learn/certifiedCourses/${encId1}`) {
                    this.active = 1;
                    this.lookAll = this.$t('look_all_course');
                } else {
                    this.active = 0;
                    this.lookAll = this.$t('look_all_course');
                }
            },
            // 深度观察监听
            deep: true
        }
    }
};
</script>

<style scoped lang="less">
.learn{
    .header-box{
        position: fixed;
        z-index: 99999;
        width: 100%;
        top: 0;
        height: 55px;
        line-height: 55px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #EEEEEE;
        .icon{
            display: inline-block;
            width: 56px;
            height: 56px;
            text-align: center;
            color: #999;
        }
        /deep/.van-tab{
            transform: translateZ(0);
            font-size: 15px;
            flex: 1 0 auto;
        }
        /deep/.van-tabs--line .van-tabs__wrap{
            height: 55px;
        }
    }
}
.modal{
    position: fixed;
    top:56px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    font-size: 12px;
}
/deep/.van-cascader__options {
    height: 300px;
}
</style>
